Introducción a HTML, CSS y SVG

IIC2026 2020-2

SVG

Introducción a HTML, CSS y SVG

IIC2026 2020-2

Scalable Vector Graphics

Scalable Vector Graphics


  • Formato de imágenes bidimensionales vectorial.
  • Define su contenido a partir de objetos con propiedades.
  • Muy compatible con HTML.

Estructura




  ...

					


  ...
(0, 0) (500, 0) (0, 500) (500, 500)
(0, 0) (500, 0) (0, 500) (500, 500)
(0, 0) (500, 0) (0, 500) (500, 500)
(0, 0) (500, 0) (0, 500) (500, 500)
(0, 0) (500, 0) (0, 500) (500, 500) 


  
  
  ¡Hola!
¡Hola! (0, 0) (500, 0) (0, 500) (500, 500)
(0, 0) (100, 0) (0, 100) (100, 100)

SVG en HTML



    <!DOCTYPE html>
    <html> 
      <head>
        <meta charset="utf-8">
        <title>Ejemplo con SVG</title>
      </head>
      <body>

        <svg width="500" height="500">
          <rect x="200" y="100" width="300" height="100" fill="red"></rect>
          <circle cx="100" cy="100" r="50" fill="blue"></circle>
          <text x="100" y="300">¡Hola!</text>
        </svg>
    
      </body>
    </html>

SVG en HTML



            
            
              
            
          

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ejemplo con SVG</title>
  </head>
  <body>

    <img src="corazon.svg"></img>
    
  </body>
</html>

SVG

Introducción a HTML, CSS y SVG

IIC2026 2020-2


¡Deja tus preguntas en los comentarios!